<template>
  <div style="background-color: #f4f4f7">
    <!-- 首页顶部 -->
    <div class="z-nav">
      <div class="z-top">
        <div class="z-chengshi">
          西安市

          <!-- 地区选择 -->
          <van-dropdown-menu active-color="#6c81f0" duration="0.1">
            <van-dropdown-item v-model="value1" :options="option1" />
          </van-dropdown-menu>

        </div>
        <div class="z-title">智慧托管</div>
      </div>

      <div class="z-khfw">
        <div class="z-ke">课后服务</div>
        <div style="margin-top: 6%" @click="addChild">
          <img src="../assets/haizi1.png" alt="" class="z-haizi" />
          <span style="font-size: 12px; color: #6c81f0">请添加孩子 </span
          ><van-icon name="arrow-down" size="14" color="#6c81f0" />
        </div>
      </div>
    </div>

    <div style="position: relative; padding-top: 25%">
      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../assets/lb1_1.png" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/lb1_2.png" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/lb1_3.png" alt="" />
        </van-swipe-item>
      </van-swipe>

      <!-- 标签栏 -->
      <div class="z-biaoqian">
        <div @click="addChild">
          <img src="../assets/biao1.png" alt="" />
          <p>普惠午托</p>
        </div>
        <div @click="addChild">
          <img src="../assets/biao2.png" alt="" />
          <p>普惠晚托</p>
        </div>
        <div @click="addChild">
          <img src="../assets/biao3.png" alt="" />
          <p>个性化课程</p>
        </div>
      </div>
    </div>

    <!-- 新闻资讯 -->
    <div class="z-xinwenBT">
      <div style="font-size: 1.2rem; font-weight: 600">
        <van-icon name="description" size="22px" color="#6c81f0" /> 新闻资讯
      </div>
      <div style="font-size: 12px; color: #a3a7ac">
        查看全部 <van-icon name="arrow" />
      </div>
    </div>

    <!-- 新闻内容 -->
    <div class="z-xinwenNR">
      <div style="border-radius: 8px">
        <div class="z-shuju" v-for="item in 4" :key="item">
          {{ item }} 假数据
        </div>

        <div style="font-size: 12px; text-align: center">
          <span
            >换一批看看
            <img
              src="../assets/shuaxin.png"
              alt=""
              style="vertical-align: middle"
            />
          </span>
        </div>
      </div>
    </div>

    <!-- 最新活动 -->
    <div class="z-zxhd">
      <div style="padding: 6% 5%">
        <div style="font-size: 1.2rem; font-weight: 600">
          <van-icon name="volume-o" size="22px" color="#6c81f0" /> 最新活动
        </div>
        <div style="padding: 3% 0; font-size: 12px; color: #a3a7ac">
          培养孩子们的兴趣爱好，解放孩子们的天性~
        </div>
        <!-- 自定义轮播 -->
        <van-swipe @change="onChange" :loop="false" :width="320">
          <van-swipe-item>
            <img src="../assets/lb2_1.png" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../assets/lb2_2.png" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../assets/lb2_3.png" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../assets/lb2_4.png" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../assets/lb2_5.png" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../assets/lb2_6.png" alt="" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              {{ current + 1
              }}<span style="font-size: 12px; color: #a3a7ac">/6</span>
            </div>
          </template>
        </van-swipe>
      </div>
    </div>

    <!-- 底部标签栏 -->
    <van-tabbar
      v-model="active"
      inactive-color="#d1d1d1"
      active-color="#274eb6"
    >
      <van-tabbar-item name="home" icon="wap-home">首页</van-tabbar-item>
      <van-tabbar-item name="news" icon="eye">看点</van-tabbar-item>
      <van-tabbar-item name="inf" icon="chat">消息</van-tabbar-item>
      <van-tabbar-item name="me" icon="friends">我的</van-tabbar-item>

      <van-tabbar-item name="game" icon="gem">
        <div @click="openGame">?</div>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Dialog } from "vant" //引入弹窗

export default {
  data() {
    return {
      current: 0, //轮播上
      active: "home", //底部栏

      // 城市下拉
      value1: 0,
      option1: [
        { text: "雁塔区", value: 0 },
        { text: "莲湖区", value: 1 },
        { text: "碑林区", value: 2 },
        { text: "新城区", value: 3 },
        { text: "未央区", value: 4 },
        { text: "长安区", value: 5 },
        { text: "灞桥区", value: 6 },
        { text: "阎良区", value: 7 },
        { text: "临潼区", value: 8 },
        { text: "高陵区", value: 9 },
        { text: "鄠邑区", value: 10 },
        { text: "蓝田县", value: 11 },
        { text: "周至县", value: 12 },
      ],
    }
  },
  methods: {
    // 打开游戏界面
    openGame() {
      window.open("/game.html", "_self")
    },

    onChange(index) {
      //轮播下
      this.current = index
    },

    addChild() {
      //添加孩子
      Dialog.confirm({
        title: "温馨提示",
        message: "暂无孩子信息，请先添加孩子",
        confirmButtonColor: "#518cea",
        cancelButtonColor: "#518cea",
        confirmButtonText: "去添加",
      })
        .then(() => {
          this.$router.push("/addchild")
        })
        .catch(() => {
          // on cancel
        })
    },
  },
}
</script>

<style lang="scss">
.z-nav {
  background-color: #fff;
  padding: 3%;
  padding-bottom: 2%;
  position: fixed;
  width: 95%;
  z-index: 10;
}
.z-top {
  position: relative;
}
.z-chengshi {
  position: absolute;
  color: #a3a7ac;
  font-size: 0.9rem;
}

.van-dropdown-menu__bar{
  box-shadow: none !important;
  height: 3vh !important;
}
.van-ellipsis{
  font-size: 12px;
  color: #a3a7ac;
}
.van-dropdown-menu{
  margin-left: -30%;
}
.van-dropdown-item__content{
  height: 33vh;
  width: 33vw !important;
  margin-left: -1%;
  
  span{
    font-size: 0.8rem;
    color: #8892a3;
  }
}

.z-title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
}
.z-khfw {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.z-ke {
  display: flex;
  justify-content: space-between;
  padding-top: 8%;
  font-size: 1.1rem;
  font-weight: 500;
  color: #264db5;
}
.z-haizi {
  vertical-align: middle;
}

.z-biaoqian {
  display: flex;
  justify-content: space-evenly;
  background-color: #fff;
  width: 90vw;
  border-radius: 8px;
  position: absolute;
  left: 5%;
  bottom: -33%;

  div {
    padding-top: 16px;
    img {
      display: block;
      margin: 0 auto;
    }
    p {
      margin-top: 10px;
      color: #a3a7ac;
      font-size: 0.9rem;
    }
  }
}
.z-xinwenBT {
  margin-top: 112px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
}
.z-xinwenNR {
  width: 90%;
  margin: 0 auto;
  padding: 3%;

  div {
    padding: 5%;
    background-color: #fff;
  }
  span {
    color: #6c81f0;
  }
}
.z-zxhd {
  margin-top: 5%;
  margin-bottom: 10%;
  div {
    background-color: #fff;
  }
}

// 自定义轮播
.custom-indicator {
  position: absolute;
  z-index: 50;
  right: 0;
  bottom: -2%;
  padding: 2px 5px;
  font-size: 1.5rem;
}
</style>